<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_3e9268b746dec8a710e5ac39e8cff5ba {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>

            <style>html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            </style>

            <style>#map {
                position:absolute;
                top:0;
                bottom:0;
                right:0;
                left:0;
                }
            </style>

            <script>
                L_NO_TOUCH = false;
                L_DISABLE_3D = false;
            </script>

        
    <script src="https://cdn.jsdelivr.net/gh/python-visualization/folium@main/folium/templates/leaflet_heat.min.js"></script>
</head>
<body>
    
    
            <div class="folium-map" id="map_3e9268b746dec8a710e5ac39e8cff5ba" ></div>
        
</body>
<script>
    
    
            var map_3e9268b746dec8a710e5ac39e8cff5ba = L.map(
                "map_3e9268b746dec8a710e5ac39e8cff5ba",
                {
                    center: [31.23, 121.47],
                    crs: L.CRS.EPSG3857,
                    ...{
  "zoom": 10,
  "zoomControl": true,
  "preferCanvas": false,
}

                }
            );

            

        
    
            var tile_layer_65da63d175652dd9b7de0b2d7a2681e7 = L.tileLayer(
                "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
                {
  "minZoom": 0,
  "maxZoom": 20,
  "maxNativeZoom": 20,
  "noWrap": false,
  "attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"https://carto.com/attributions\"\u003eCARTO\u003c/a\u003e",
  "subdomains": "abcd",
  "detectRetina": false,
  "tms": false,
  "opacity": 1,
}

            );
        
    
            tile_layer_65da63d175652dd9b7de0b2d7a2681e7.addTo(map_3e9268b746dec8a710e5ac39e8cff5ba);
        
    
            var heat_map_7d9a0375f6089450dcdbb0a8306dc16d = L.heatLayer(
                [[31.22, 121.53, 28], [31.23, 121.49, 15], [31.23, 121.46, 12], [31.19, 121.43, 18], [31.22, 121.42, 10], [31.25, 121.4, 14], [31.27, 121.5, 8], [31.27, 121.52, 16], [31.12, 121.38, 22], [31.41, 121.48, 13], [31.38, 121.27, 9], [30.75, 121.34, 5], [31.03, 121.23, 7], [31.15, 121.12, 6], [30.92, 121.47, 4], [31.62, 121.4, 3]],
                {
  "minOpacity": 0.3,
  "maxZoom": 15,
  "radius": 15,
  "blur": 20,
  "gradient": {
  0.4: "blue",
  0.6: "lime",
  1: "red",
},
}
            );
        
    
            heat_map_7d9a0375f6089450dcdbb0a8306dc16d.addTo(map_3e9268b746dec8a710e5ac39e8cff5ba);
        
    
            var heat_map_144ffde615379c82d6e7d3a77778c0a2 = L.heatLayer(
                [[31.22, 121.53, 32], [31.23, 121.49, 18], [31.23, 121.46, 15], [31.19, 121.43, 20], [31.22, 121.42, 12], [31.25, 121.4, 16], [31.27, 121.5, 9], [31.27, 121.52, 17], [31.12, 121.38, 25], [31.41, 121.48, 14], [31.38, 121.27, 10], [30.75, 121.34, 6], [31.03, 121.23, 8], [31.15, 121.12, 7], [30.92, 121.47, 5], [31.62, 121.4, 4]],
                {
  "minOpacity": 0.3,
  "maxZoom": 15,
  "radius": 15,
  "blur": 20,
  "gradient": {
  0.4: "purple",
  0.6: "orange",
  1: "yellow",
},
}
            );
        
    
            heat_map_144ffde615379c82d6e7d3a77778c0a2.addTo(map_3e9268b746dec8a710e5ac39e8cff5ba);
        
    
            var layer_control_2de6aec065e9f3fbaafdf1b812c1c25d_layers = {
                base_layers : {
                    "cartodbpositron" : tile_layer_65da63d175652dd9b7de0b2d7a2681e7,
                },
                overlays :  {
                    "\u533b\u7597\u8bbe\u65bd\u5206\u5e03" : heat_map_7d9a0375f6089450dcdbb0a8306dc16d,
                    "\u517b\u8001\u673a\u6784\u5206\u5e03" : heat_map_144ffde615379c82d6e7d3a77778c0a2,
                },
            };
            let layer_control_2de6aec065e9f3fbaafdf1b812c1c25d = L.control.layers(
                layer_control_2de6aec065e9f3fbaafdf1b812c1c25d_layers.base_layers,
                layer_control_2de6aec065e9f3fbaafdf1b812c1c25d_layers.overlays,
                {
  "position": "topright",
  "collapsed": false,
  "autoZIndex": true,
}
            ).addTo(map_3e9268b746dec8a710e5ac39e8cff5ba);

        
</script>
</html>